﻿<template>
    <div class="sidebar">
        <div class="user_center divider">
            <div class="head_portrait center-block">
                <avatar :src="person_info.iconUrl" />
                <i class="gender boy" v-if="person_info.authType != 2"></i>
            </div>
            <p class="use_name">
                <span>{{person_info.nickName}}</span>
                <a v-bind:href="'#/settings'"><i class="el-icon el-icon-edit" title="编辑资料"></i></a>
            </p>
            <p><img :src="person_info.pcImgtxtUrl" v-if="person_info && person_info.authStatus === 1 && person_info.pcImgtxtUrl" height="16"></p>
        </div>
        <el-menu :default-active="activeIndex" unique-opened @select="handleSelect">
            <el-submenu index="race" v-if="authData.length>0">
                <template slot="title">认证功能</template>
                <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
                <el-menu-item v-for="item in authData" :index="item.serviceUrl" :key="item.id" @click="handleChangeRoute(item.serviceName)" class="hidden" :title="item.serviceName">
                  <el-badge :value="item.serviceCode.includes('8993')?message_unread:''" class="item" >{{item.serviceName}}</el-badge>
                </el-menu-item>
            </el-submenu>
            <el-submenu index="authorized" v-if="accpData.length>0">
                <template slot="title">授权功能</template>
                <el-menu-item v-for="(item,index) in accpData" :key="index" :index="'/authorized/' + item.orgUserId" @click="setOrgId(item.orgUserId)" class="hidden" :title="item.orgUserName">
                  {{item.orgUserName}}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
  import authorizeApi from 'api/authorize'
  import { mapGetters } from 'vuex'
  export default {
    created () {
      // 认证服务
      authorizeApi.authServiceList({
        userId: this.userId
      }).then((res) => {
        this.authData = res.data
        this.authData.map(item => {
          if (item.serviceCode === '8993' && localStorage.getItem('htxk_userId')) {
            this.$store.dispatch('message_unread', {authOrgId: localStorage.getItem('htxk_userId')})
          }
        })
      }).catch((ERR) => {
        return false
      })
      // 授权服务
      authorizeApi.accpOrgList({
        userId: this.userId
      }).then((res) => {
        this.accpData = res.data
      }).catch((ERR) => {
        return false
      })
      let menuSelect = localStorage.getItem('menuKey')
      if (menuSelect) {
        this.activeIndex = menuSelect
      }
    },
    computed: {
      ...mapGetters({
        person_info: 'person_info',
        userId: 'userId',
        message_unread: 'message_unread',
        message_organize_unread: 'message_organize_unread'
      })
    },
    watch: {
      '$route' () {
        if (this.$route.query.authOrgId && this.$route.fullPath.includes('message')) {
          this.$store.dispatch('message_organize_unread', {authOrgId: this.$route.query.authOrgId})
        }
        if (this.$route.path.includes('message') && !this.$route.query.authOrgId) {
          this.$store.dispatch('message_unread', {authOrgId: localStorage.getItem('htxk_userId')})
        }
      }
    },
    data () {
      return {
        iconUrl: '/static/images/default_photo.jpg',
        authData: [],
        accpData: [],
        activeIndex: ''
      }
    },
    methods: {
      handleSelect (key, keyPath) {
        localStorage.setItem('menuKey', key)
        this.activeIndex = key
        this.$router.push(key)
      },
      handleChangeRoute (code) {
        localStorage.setItem('auth_orgId', '')
        if (code === '我的订单') {
          this.$router.push({
            path: '/order',
            query: {
              statusList: '2,4',
              beginCreateDate: new Date().getTime() - 3600 * 1000 * 24 * 30,
              endCreateDate: new Date().getTime(),
              vendorUserId: this.person_info.userId
            }
          })
        }
      },
      setOrgId (id) {
        localStorage.setItem('auth_orgId', id)
      }
    }
  }
</script>

<style lang="scss">
.sidebar {
  .el-menu {
    background: #fff;
    min-height: 100%;
    border-radius: 0;
    text-align: center;
    .el-submenu:hover .el-submenu__title {
      background: #fff;
    }
    .el-submenu__title {
      font-size: 16px;
    }
    &-item {
      &:hover {
        background: #f0fcf9;
      }
      &.is-active {
        border-left: 3px solid #01a87c;
        background: #f0fcf9;
      }
    }
  }
  .el-submenu__icon-arrow{
    margin-top: -3px;
  }
  .el-submenu.is-opened{
    > .el-submenu__title{
      .el-submenu__icon-arrow{
        margin-top: -5px;
      }
    }
  }
  .item .el-badge__content.is-fixed {
    top: 20px;
    right: 0px;
    position: absolute;
    transform: translateY(-50%) translateX(100%);
    text-align: center;
  }
  .user_center {
    padding: 30px 8px 15px;
    text-align: center;
    line-height: 30px;
    .use_name {
      a{
        line-height: 30px;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
      }
      span {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-line-clamp: 1;
      }
    }
  }
  .head_portrait {
    height: 100px;
    width: 100px;
    position: relative;
    border-radius: 50%;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .gender {
      display: block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      position: absolute;
      right: 0px;
      bottom: 8px;
    }
    .girl {
      background: url("/static/images/girl.png");
    }
    .boy {
      background: url("/static/images/boy.png");
    }
  }
}
</style>
